<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">权限</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click='addCate' >添加分类</el-button>
                </el-col>
            </el-row>

            <tree-table
                    class="table"
                    :selection-type="false"
                    :expand-type="false"
                    show-index
                    index-text="#"
                    :data="cateList"
                    :columns="columns">

                <template slot-scope="scope" slot="isok">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted !== 'false'" style="color:#a2bf5f"></i>
                    <i class="el-icon-error" v-else style="color:#402626"></i>
                </template>
                <template slot-scope="scope" slot="order">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
                    <el-tag v-else type="warning">三级</el-tag>
                </template>
                <template slot="opt" slot-scope="scope" :width="180 + 'px'">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>
                </template>


            </tree-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="querInfo.pagenum"
                        :page-sizes="[3, 5, 8, 10]"
                        :page-size="querInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>


<!--            <el-tree :data="cateList" :props="defaultProps"></el-tree>-->

<!--            使用UI库的-->
<!--            <el-table-->
<!--                    :data="cateList"-->
<!--                    style="width: 100%"-->
<!--                    row-key="cat_id"-->
<!--                    border-->
<!--                    lazy-->
<!--                    :load="load"-->
<!--                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">-->
<!--                <el-table-column-->
<!--                        prop="cat_name"-->
<!--                        label="分类名称">-->
<!--                </el-table-column>-->
<!--            </el-table>-->

        </el-card>

<!--        添加分类对话框-->
        <el-dialog
                :close-on-click-modal="false"
                @close="addCateClosed"
                title="添加分类"
                :visible.sync="addCateDialogVisible"
                width="50%">
            <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader
                            clearable
                            expandTrigger = 'hover'
                            v-model="value"
                            :options="parentCateList"
                            :props="cascaderProps"
                            @change="parentCateChanged"></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCates">确 定</el-button>
            </span>
        </el-dialog>
        <!--            修改分类信息    -->
        <el-dialog
                @close="editDialogClosed"
                resetFields
                title="修改分类信息"
                :visible.sync="editDialogVisible"
                width="50%"
                center>
            <el-form
                    :model="editForm"
                    :rules="editFormRules"
                    ref="editCateFormRef"
                    label-width="70px"
                    class="demo-ruleForm">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUserInfo">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Cate",
        data(){
            return{
             // addCateForm:{value:'cat_id',label:'cat_name',children:'children'},
                addCateForm:{
                    // 父类分类的ID
                    cat_pid: 0,
                    cat_name:'',
                    // 父类的等级权限
                    cat_level:0
                },
                querInfo:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                value:[],
                cateList: [],
                total:0,
                editForm:{},
                addCateDialogVisible:false,
                editDialogVisible:false,
                parentCateList:[],
                defaultProps: {
                    children: 'children',
                    label: 'cat_name'
                },
                columns:[
                    {
                        label: '分类名称',
                        prop:'cat_name'
                    },
                    {
                        label: '是否有效',
                        type:'template',
                        template:'isok'
                    },
                    {
                        label: '排序',
                        type:'template',
                        template:'order'
                    },
                    {
                        label: '设置',
                        type:'template',
                        template:'opt',
                        width:"300px"
                    },
                    ],
                addCateFormRules: {
                    cat_name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                },
                editFormRules:{
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                },
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    checkStrictly : true
                }
            }
        },
        created() {
            this.getCateList()
        },
        methods:{
            async getCateList(){
                const {data:res} = await this.$http.get('categories',{params:this.querInfo})
                // console.log(res.data.result)
                this.cateList = res.data.result
                this.total = res.data.total
            },
            handleSizeChange(newsize) {
                this.querInfo.pagesize = newsize
                this.getCateList()
            },
            handleCurrentChange(newnum) {
                this.querInfo.pagenum = newnum
                this.getCateList()
            },
            addCate(){
                this.getParentCateList()
                this.addCateDialogVisible = true
            },
            addCateClosed(){
                this.addCateForm.cat_pid = 0
                this.addCateForm.cat_level = 0
                this.value = []
                this.$refs.addCateFormRef.resetFields()
            },
            async getParentCateList(){
                const {data:res} = await this.$http.get('categories',{
                    params:{type:2}
                })
                console.log(res)
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                this.parentCateList = res.data
                console.log(this.parentCateList)
            },
            parentCateChanged() {
                console.log(this.value)
                if(this.value.length > 0){
                    this.addCateForm.cat_pid = this.value[this.value.length - 1]
                    this.addCateForm.cat_level = this.value.length
                    // return
                }else{
                    this.addCateForm.cat_pid = 0
                    this.addCateForm.cat_level = 0
                }
            },
            addCates(){
                this.$refs.addCateFormRef.validate(async valid => {
                    if(!valid)return
                    const {data:res} = await this.$http.post('categories',this.addCateForm)
                    console.log(res)
                    if(res.meta.status !== 201) return this.$message.error(res.meta.msg)
                    this.getCateList()
                    this.addCateDialogVisible = false
                })
                console.log(this.addCateForm)
            },
            removeCateById(id){
                console.log(id)
                this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data:res} = await this.$http.delete('categories/' + id)
                    if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getCateList()
                }).catch(() => {
                });
            },
            async showEditCateDialog(id){
                const {data:res} = await this.$http.get('categories/' + id )
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                this.editForm = res.data
                console.log(this.editForm)
                this.editDialogVisible = true
            },
            editDialogClosed(){
                this.$refs.editCateFormRef.resetFields()
            },
            async editUserInfo(){
                const {data:res} = await this.$http.put('categories/'+ this.editForm.cat_id,{cat_name:this.editForm.cat_name})
                console.log(res)
                this.editDialogVisible = false
                this.getCateList()
            }
        }
    }
</script>

<style scoped>
    .table{
        margin: 15px 0;
    }
</style>